<template>
	<view class="login_page">
		<view class="hello">您好,</view>
		<view class="hello">欢迎{{is_register?'注册':'登录'}}小安到家</view>
		<!-- 登录 -->
		<block>
			<view class="form">
				<u-input class="ipt" v-model="phone" type="number" border="bottom" placeholder="请输入你的手机号"></u-input>
				<u-input v-if="is_register" class="ipt" v-model="code" type="number" border="bottom"
					placeholder="请输入验证码">
					<template slot="suffix">
						<view class="code">获取验证码</view>
					</template>
				</u-input>
				<u-input v-else class="ipt" v-model="password" :type="is_code?'number':look?'number':'password'"
					border="bottom" :placeholder="is_code?'请输入验证码':'请输入密码'">
					<template v-if="is_code" slot="suffix">
						<view class="code">获取验证码</view>
					</template>
					<template v-else slot="suffix"><u-icon :name="look?'eye-fill':'eye-off'"
							@click="look=!look"></u-icon></template>
				</u-input>
				<u-input v-if="is_register" v-model="password" class="ipt" type="password" border="bottom"
					placeholder="请输入登录密码"></u-input>
				<button class="logon-btn" @click="login()">{{is_register?'注册':'登录'}}</button>
				<view class="item">
					<view @click="changeCode()">{{is_code?'密码登录':'验证码登录'}}</view>
					<view>{{is_register?'已有账号':'还没账号'}}, <span
							@click="changeRegister()">{{is_register?'去登录':'立即注册'}}</span></view>
				</view>
			</view>
		</block>


		<view class="tips">登录即代表同意《隐私协议》及《用户协议》</view>
	</view>
</template>

<script>
	import {
		login,
		register
	} from "../../api/index.js"
	export default {
		data() {
			return {
				is_code: false,
				is_register: false,
				look: false,
				phone: '',
				code: '',
				password: '',
			}
		},
		onLoad() {
			if(uni.getStorageSync('tokenVal')){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		},
		methods: {
			changeCode() {
				this.code = ''
				this.password = ''
				this.is_register = false
				setTimeout(() => {
					this.is_code = !this.is_code
				}, 200)
			},
			changeRegister() {
				this.code = ''
				this.password = ''
				this.is_register = !this.is_register
			},
			login() {
				//注册
				if(this.is_register){
					let zcdata={
						mobile:this.phone,
						password:this.password,
						code:this.code
					}
					register(zcdata).then(res=>{
						console.log(res);
						var token = res.data.userinfo.token
						var time = res.data.userinfo.expiretime
						uni.setStorageSync('time',time)
						uni.setStorageSync('tokenVal', token)
						if (res.data.userinfo) {
							uni.switchTab({
								url: "/pages/index/index"
							})
						} else {
							uni.showToast({
								title: res.msg,
							})
						}
					})
				}else{
					if(this.is_code){
						let p ={
							mobile:this.phone,
							captcha:this.password,
						}
						codeLogin(p).then(res=>{
							console.log(res);
							var token = res.data.userinfo.token
							var time = res.data.userinfo.expiretime
							uni.setStorageSync('time',time)
							uni.setStorageSync('tokenVal', token)
							uni.switchTab({
								url: '/pages/index/index'
							})
						})
					}else{
						//密码登录
						let data ={
							account:this.phone,
							password:this.password
						}
						login(data).then(res=>{
							console.log(res);
							var token = res.data.userinfo.token
							var time = res.data.userinfo.expiretime
							uni.setStorageSync('time',time)
							uni.setStorageSync('tokenVal', token)
							uni.switchTab({
								url: '/pages/index/index'
							})
						})
					}
					
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login_page {
		width: 100vw;
		height: 100vh;
		padding: 248rpx 60rpx;
		position: relative;

		.hello {
			font-size: 48rpx;
			color: #333333;
			font-weight: bold;
			margin-top: 32rpx;
		}

		.form {
			width: 100%;
			height: auto;
			margin-top: 110rpx;

			.ipt {
				width: 100%;
				height: 112rpx;
				line-height: 112rpx;
				font-size: 32rpx;

				.code {
					width: 142rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					background-color: #00cc7b;
					color: #FFFFFF;
					font-size: 24rpx;
					border-radius: 64rpx;
				}
			}

			.logon-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #00cc7b;
				color: #FFFFFF;
				text-align: center;
				border-radius: 8rpx;
				margin-top: 96rpx;
			}
		}

		.item {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			color: #666666;
			font-size: 28rpx;
			margin-top: 32rpx;

			span {
				color: #00cc7b;
			}
		}

		.tips {
			width: 100%;
			height: auto;
			font-size: 24rpx;
			color: #999999;
			position: absolute;
			bottom: 80rpx;
			left: 134rpx;
		}
	}
</style>